// Plotter Object
function XYPlotter(id){

    //setup
    /**@type HTMLCanvasElement*/
    this.canvas = document.getElementById(id);
    this.ctx = this.canvas.getContext('2d');

    this.xMin = 0;
    this.yMin = 0;

    this.xMax = this.canvas.width;
    this.yMax = this.canvas.height;
    this.ctx.font = "16px Verdana";
    this.xF = 1;
    this.yF = 1;

    this.transformXY = function(){
        this.ctx.transform(1, 0, 0, -1, 0, this.canvas.height);
    }

    this.transformMax = function(x,y){
        this.xF = this.xMax / x;
        this.yF = this.yMax / y;
    }

    this.plotPoint = function(x, y, color, radius = 3){
        this.ctx.fillStyle = color;
        this.ctx.beginPath();
        this.ctx.ellipse(x*this.xF, y*this.yF, radius, radius, 0, 0, Math.PI * 2);
        this.ctx.fill();
    }

    this.plotPoints = function(n, xArr, yArr, color, radius = 3){
        for(let i=0; i<n; i++){
            this.ctx.fillStyle = color;
            this.ctx.beginPath();
            this.ctx.ellipse(xArr[i]*this.xF, yArr[i]*this.xF, radius, radius, 0, 0, Math.PI*2);
            this.ctx.fill();
        }
    }

    this.plotLine = function(x0, y0,x,y,color){
        this.ctx.moveTo(x0*this.xF,y0*this.yF);
        this.ctx.lineTo(x*this.xF,y*this.yF);
        this.ctx.strokeStyle = color;
        this.ctx.stroke()
    }

    this.plotCircle = function(x,y,r){
        this.ctx.beginPath();
        this.ctx.arc(x*this.xF, y*this.yF, r, 0,2*Math.PI);
        this.ctx.stroke();
    }

    this.plotText = function(x,y,text){
        this.ctx.fillText(text,x*this.xF,y*this.yF);
    }

}